<template>
  <div>
    <div style="background: #fff;min-height: 100vh;">
        <div style="background-color: #FF2E67;height: 105px;">
            <img @click="returnBcak" style="width: 10px;top:10px;left:10px;position: absolute;" src="../assets/img/common-icon-ArrowLeftWhite.svg" alt="">
            <div style="padding:10px 0px;margin-left:-26px">
                <span style="margin-left:50%;color: #fff;font-size: 16px;opacity:.8;">拼多多</span>
            </div>
            <ul class="elementSty" style="white-space: nowrap;overflow-x: scroll;padding:20px 10px;">
                <li style="display: inline-block;margin-right:20px;text-align: center;color:#fff;font-size: 16px;" @click="selIndexList">
                    <div>
                      <div :style="activeNum == -1?'':'opacity: .6'">精选</div>
                      <div v-if="activeNum == -1" style="border:1px solid #fff;width:32px;margin-top:5px;"></div>
                    </div>
                </li>
                <li v-for="(val,index) in listCl" style="display: inline-block;margin-right:20px;text-align: center;color:#fff;font-size: 16px;" @click="selList(val,index)">
                    <div>
                      <div :style="activeNum == index?'':'opacity: .6'">{{val.catName}}</div>
                      <div v-if="activeNum == index && val.catName.length == 2" style="border:1px solid #fff;width:32px;margin-top:5px;"></div>
                      <div v-if="activeNum == index && val.catName.length == 4" style="border:1px solid #fff;width:64px;margin-top:5px;"></div>
                      <div v-if="activeNum == index && val.catName.length == 3" style="border:1px solid #fff;width:48px;margin-top:5px;"></div>
                      <div v-if="activeNum == index && val.catName.length == 5" style="border:1px solid #fff;width:66px;margin-top:5px;"></div>
                    </div>
                </li>
            </ul>     
        </div>
        <div style="background: #EDEDED;padding:10px;">
            <!-- <div style="font-size: 16px;font-weight: bold;margin:10px 0 20px 0;">猜你喜欢</div> -->
            <productList @proId="getProId" @numId="getNumId" :dataList="objVla" :urlPathVal="indexUrl"></productList>
        </div>
    </div>
    <div v-if="creatShareShow" style="position: fixed;top:0;z-index: 1000;width: 100%;">
      <creatShare :numId="numId" @returnPage="returnCurrentPage"></creatShare>
    </div>
    <!-- <div v-if="showDetail" style="position: absolute;top:0;z-index: 1000;width: 100%;">
      <detailsPage @getShow="getShow" :typeShop="typeShop" :tranmitId="proId"></detailsPage>
    </div> -->
  </div>
</template>
  
  <script>
  import productList from './public/productList.vue';
  import detailsPage from './public/detailsPage.vue';
  import creatShare from './creatShare.vue';
  export default {
    name: 'pinduoduoListPage',
    data () {
      return {
        typeShop:"pinduoduo",
        indexUrl:'pinduoduoTj',
        showDetail:false,
        proId:"",
        listCl:[],
        activeNum:-1,
        objVla:{},
        numId:'',
        creatShareShow:false
      }
    },
    components: {  
        productList,
        detailsPage,
        creatShare
    },
    
    mounted() {
      this.initData();
    },
    methods: {
      initData(){        
        this.$http.get(this.utils.config+"/netmall/app/pdd/api/classify/getCats").then((data) => {
            console.log(data)
            if(data.data.success){
              this.listCl = data.data.result;
            }
        })
      },
      returnCurrentPage(data){
        this.creatShareShow = data;
      },
      getNumId(data){
        this.numId = data;
        this.creatShareShow = true;
      },
      selList(val,index){
        this.activeNum = index;
        this.indexUrl = "pinduoduoDl";
        this.objVla = val;
      },
      selIndexList(){
        this.activeNum = -1;
        this.indexUrl = "pinduoduoTj";
        this.$forceUpdate();
      },
      getProId(data){
        this.proId = data;
        this.showDetail = true;
      },
      getShow(data){
        this.showDetail = data;
      },
      jumpSearch(){
          this.$router.push('/searchPage');
      },
      returnBcak(){
          this.$router.push('/');
      },
    },
  }
  </script>
  
  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style scoped>
      .iptSty{
          height: 40px;
          line-height: 40px;
          padding-left:40px;
          background-color: #fff;
          border-radius: 20px;
          width:100%;
          border:none;
          box-sizing: border-box;
      }
      input::placeholder{
          color: #888;
          font-weight: 400;
      }
      .btn1{
          position: absolute;
          right:10px;
          top:0;
          background-color: #FFE842;
          border-radius: 20px;
          font-size: 14px;
          color:#B34C00;
          border:none;
          padding:0 22px;
          height: 40px;
          line-height: 40px;
      }
      .elementSty::-webkit-scrollbar {display:none}
  </style>
  